
<!doctype html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>测试程序</title>
  <link rel="stylesheet" type="text/css" href="dist/jquery.gridster.css">
  <link rel="stylesheet" type="text/css" href="demo.css">
</head>

<body>

    <h1 id="ttt">Build grid from serialized positions</h1>

    <p>Build a entire new grid from previously stored positions obtained with <code>serialize</code> method.</p>

    <div class="controls">
        <button class="js-seralize">建立</button>
        <button class="js-addnew">增加格子</button>
        <button class="js-delete">删除格子</button>
        <button class="js-test">测试</button>
        <button id="js-output">输出</button>
    </div>

    <div class="gridster">
        <ul>
        </ul>
    </div>


    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="javapp.js"></script>
    <script src="dist/jquery.gridster.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">
      var gridster;
      groovy =  java.groovy('DemoTest.groovy');

      // same object than generated with gridster.serialize() method
      var serialization_1 = [
        {
            col: 1,
            row: 1,
            size_x: 2,
            size_y: 2,
            gid: "C00001",
            ctype: "TButton",
            cname: "abc"
        },
        {
            col: 1,
            row: 1,
            size_x: 1,
            size_y: 1,
            gid: "C00009",
            ctype: "TButton",
            cname: "abc"
        }
      ];
      
      var s = groovy.testData();
      var serialization = eval("("+s+")");

      // sort serialization
      //serialization = Gridster.sort_by_row_and_col_asc(serialization);

      $(function(){

        gridster = $(".gridster ul").gridster({
          //widget_base_dimensions: [100, 55],
          widget_base_dimensions: [50, 25],
          widget_margins: [5, 5],
          helper: 'clone',
          resize: {
            enabled: true
          }
        }).data('gridster');


        $('.js-seralize').on('click', function() {
            gridster.remove_all_widgets();
            $.each(serialization, function(i, e) {
            	var x = '<li gid="{0}">{1}<br>{2}</li>';
            	x = x.format(this.gid, this.ctype, this.cname);
                gridster.add_widget(x, this.size_x, this.size_y, this.col, this.row);
            });
        });
        
        $('.js-addnew').on('click', function() {
            	var x = '<li gid="NA">----</li>';
                gridster.add_widget(x, 1, 1, 1, 1);
        });   
        
        $('.js-delete').on('click', function() {
            	  var nodes = $('[gid="NA"]');
            	  gridster.remove_widget(nodes[0]);
        }); 
             
        $('.js-test').on('click', function() {
        	$('#ttt').text(java);
        	//var s = java.readfile('DemoTest.groovy');
        	//var s = java.readurl('DemoTest.groovy');
        	
        	var s = groovy.ghello("world");
        	$('#ttt').text(s);
 		 }); 
        
        $('#js-output').on('click', function() {
			var nodes = $(".gridster ul li");
			var out = [];
            $.each(nodes, function(i, n) {
            	//java.debug('loop...');
            	var o = {};
            	o.gid = $(n).attr('gid');
            	o.row = parseInt( $(n).attr('data-row') );
            	o.col = parseInt( $(n).attr('data-col') );
            	o.sizex = parseInt( $(n).attr('data-sizex') );
            	o.sizey = parseInt( $(n).attr('data-sizey') );
            	out.push(o);
            });
            
            java.debug(JSON.stringify(out));
 		 }); 
        
      });
    </script>
</body>
</html>
